<template>
	<div class="userTotal">
		<view-table
			title="员工列表"
			tips=""
			:page="page"
			:page-size="pageSize"
			:page-total="tableData.pagination.total"
			@pageChange="onPageChange"
		>
			<template #titleBtn>
				<el-button @click="addUser" type="primary" size="small">添加员工</el-button>
			</template>
			<template #search>
				<el-form ref="form" :model="loadParams" label-width="110px">
					<el-form-item label="员工ID">
						<el-input
							v-model="loadParams.id"
							placeholder="请输入名称进行搜索"
							size="small"
							@change="onSearch"
						></el-input>
					</el-form-item>
					<el-form-item label="员工昵称">
						<el-input
							v-model="loadParams.nickname"
							placeholder="请输入名称进行搜索"
							size="small"
							@change="onSearch"
						></el-input>
					</el-form-item>
					<el-form-item label="在职状态">
						<el-select size="small" v-model="loadParams.status" @change="onSearch">
							<el-option
								v-for="item in statusList"
								:key="item.type"
								:label="item.title"
								:value="item.type"
							>
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</template>
			<template #btn>
				<!-- <el-button @click="onSearch" type="primary" size="small"
					>筛选</el-button
				>
				<el-button @click="clearSearch" type="info" size="small"
					>清除筛选项</el-button
				> -->
				<!-- <el-upload
					class="upload-btn"
					accept=".xls,.xlsx"
					:action="actionUrl"
					:show-file-list="false"
					name="file"
					:before-upload="(file) => beforeUploadExcel(file)"
					:on-success="(res, file) => uploadSuccess(res)"
				>
					<el-button size="small" type="warning">批量导入</el-button>
				</el-upload> -->
			</template>

			<el-table border :data="tableData.list">
				<el-table-column
					prop="id"
					label="ID"
					:fixed="!$store.state.isMobile"
				></el-table-column>
				<el-table-column prop="code" label="员工信息" :fixed="!$store.state.isMobile">
					<template slot-scope="scope">
						<div class="userInfo">
							<p>{{ scope.row.nickname }}</p>
							<!-- <img :src="scope.row.avatar" /> -->
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="sex" label="性别"></el-table-column>
				<el-table-column prop="year_day" label="年假天数"></el-table-column>
				<el-table-column prop="work_day" label="加班天数"></el-table-column>
				<el-table-column prop="rest_day" label="调休天数"></el-table-column>
				<el-table-column prop="id" label="剩余调休">
					<template slot-scope="scope">
						{{ scope.row.work_day - scope.row.rest_day + scope.row.year_day }}</template
					>
				</el-table-column>
				<el-table-column prop="phone" label="手机号" width="120"></el-table-column>
				<el-table-column prop="address" label="籍贯"></el-table-column>
				<el-table-column prop="status" label="在职状态">
					<template slot-scope="scope"
						>{{ scope.row.status ? "在职" : "离职" }}
					</template>
				</el-table-column>
				<el-table-column prop="join_date" label="入职时间" width="100">
					<template slot-scope="scope"
						>{{ $utils.dateFormat(new Date(scope.row.join_date), "yyyy-MM-dd") }}
					</template>
				</el-table-column>
				<el-table-column prop="leave_date" label="离职时间" width="100">
					<template slot-scope="scope"
						>{{
							scope.row.leave_date
								? $utils.dateFormat(new Date(scope.row.leave_date), "yyyy-MM-dd")
								: "-"
						}}
					</template>
				</el-table-column>
				<el-table-column
					label="操作"
					:fixed="$store.state.isMobile ? false : 'right'"
					width="150"
					v-if="roles.includes('admin')"
				>
					<template slot-scope="scope">
						<el-button type="text" size="mini" @click="openEveType(scope.row, 1)"
							>编辑</el-button
						>
						<el-button type="text" size="mini" @click="openEveType(scope.row, 2)"
							>加班</el-button
						>
						<el-button type="text" size="mini" @click="openEveType(scope.row, 3)"
							>调休</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</view-table>

		<el-dialog
			:visible.sync="dialogVisible"
			:show-close="false"
			@close="closeFun"
			width="500px"
			center
		>
			<div class="title-name">
				<p>{{ form.type === 1 ? "加班" : "调休" }}</p>
			</div>
			<el-form :model="form" ref="form" label-width="100px">
				<el-form-item label="开始日期" required>
					<el-date-picker
						v-model="form.date"
						type="date"
						value-format="yyyy-MM-dd"
						placeholder="开始日期"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item label="天数" required>
					<el-input size="mini" type="number" v-model="form.time"></el-input>
				</el-form-item>
				<el-form-item label="原因" required>
					<el-input size="mini" v-model="form.reason"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" @click="closeFun">取 消</el-button>
				<el-button size="small" @click="saveLabel" type="primary">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import loadList from "@components/mixins/loadList";

export default {
	name: "userList",

	mixins: [loadList],

	data() {
		return {
			actionUrl:
				process.env.NODE_ENV == "development"
					? "http://192.168.2.110:3001/admin/user-excel"
					: `${location.origin}/admin/user-excel`,
			api: "userList",
			loadParams: {
				status: 1,
			},
			dialogVisible: false,
			form: {
				user_id: "",
				time: "",
				type: "",
				date: "",
				reason: "",
			},
			statusList: [
				{ type: "", title: "全部" },
				{ type: 1, title: "在职" },
				{ type: 0, title: "离职" },
			],
			roles: localStorage.roles ? JSON.parse(localStorage.roles) : [],
		};
	},

	mounted() {
		this.loadListFn();
	},

	methods: {
		/**文件处理中 */
		beforeUploadExcel(file) {
			this.$message({
				message: "文件上传中...",
				duration: 0,
			});
		},

		/**文件上传成功返回 */
		uploadSuccess(res) {
			this.$message.closeAll();
			if (res.code == 200) {
				this.$message({
					type: "success",
					message: "导入成功!",
					duration: 1000,
				});
				this.onSearch();
			} else {
				this.$message.error(res.message);
			}
		},

		openEveType(data, type) {
			if (type == 1) {
				this.$router.push(`/user/userAdd?id=${data.id}`);
			}
			if (type == 2 || type == 3) {
				this.form.type = type == 2 ? 1 : 2;
				this.form.user_id = data.id;
				this.form.nickname = data.nickname;
				this.dialogVisible = true;
			}
		},

		addUser() {
			this.$router.push("/user/userAdd");
		},

		// 关闭弹窗
		closeFun() {
			this.dialogVisible = false;
			for (const key in this.form) {
				this.form[key] = "";
			}
		},

		// 提交弹窗信息
		saveLabel() {
			if (this.verify()) return;
			this.form.time = +this.form.time;
			this.$axios.post(`attendanceAdd`, this.form).then((res) => {
				this.$message({
					message: `提交成功`,
					type: "success",
					duration: 1500,
					onClose: () => {
						this.closeFun();
						this.loadListFn();
					},
				});
			});
		},

		verify() {
			let obj = {
				date: ["请选择日期"],
				time: ["请输入时长"],
				reason: ["请输入原因"],
			};
			const tips = this.$utils.verify(obj, this.form);
			if (tips) {
				return this.$message.error(tips) && true;
			}
			return false;
		},
	},
};
</script>
<style lang="less" scoped>
.userInfo {
	img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-left: 10px;
	}
}
.upload-btn {
	display: inline-block;
	margin-left: 10px;
}
.datePicker {
	width: 300px;
}
</style>
